<template>
    <el-scrollbar style="display:block">
        <div class="scrollbar-flex-content">

            <el-button v-for="(item, index) in     leveList    " :key="item" :type="item.meta.isShowCri ? 'primary' : ''"
                class="button" @click="changeRoute(item)">

                <span class="yuanquan" v-show="item.meta.isShowCri"></span>
                <span>{{ item.meta.title }}</span>
                <!-- <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
                <el-icon @click.prevent="closeItem(item, index)" v-if="item.path !== '/home'">
                    <Close />
                </el-icon>
            </el-button>
        </div>
    </el-scrollbar>
</template>
<script setup lang="ts">
import { Close } from '@element-plus/icons-vue'
import { compile } from 'path-to-regexp'
import { onMounted, ref, watch } from 'vue';
import { navStateStore } from '@/stores/navSata'
import { RouterLink, useRoute, useRouter } from 'vue-router';
const leveList = ref()
const route = useRoute()
const router = useRouter()
const navStateV = navStateStore()
// const isShowCri = ref(false)
onMounted(() => {
    navStateV.getScroolList(route)
    leveList.value = navStateV.scroolList.filter(
        (item: any) => item.meta && item.meta.title && item.meta.isShow
    )
})
watch(route, () => {
    navStateV.getBreadcrumb(leveList, route, 'scrool')
    leveList.value = navStateV.scroolList.filter(
        (item: any) => item.meta && item.meta.title && item.meta.isShow
    )
})
const pathCompile = (path: string) => {
    const { params } = route
    var toPath = compile(path)
    return toPath(params)
}

const handleLink = (item: any) => {
    const { redirect, path } = item
    if (redirect) {
        router.push(redirect)
        return
    }
    router.push(pathCompile(path))
}
// 点击关闭按钮关闭当前路由
const closeItem = (item: any, index: number) => {
    navStateV.closeItem(item, index)
}
// 监听仓库里面数据的变化，只要改变了路由展示的菜单也要跟着改变
watch(() => navStateV.scroolList, () => {
    console.log(1);

    leveList.value = navStateV.scroolList.filter(
        (item: any) => item.meta && item.meta.title && item.meta.isShow
    )
}, {
    deep: true
})

// 点击切换路由
const changeRoute = (item: any) => {
    // console.log(item);
    leveList.value = leveList.value.map((itemRoute: any) => {
        itemRoute.meta.isShowCri = false
        if (itemRoute === item) {
            itemRoute.meta.isShowCri = true
        }
        return itemRoute
    })
    router.push(item.path)
}

</script>
<script lang="ts">
export default {
    name: 'ScrollbarView'
}
</script>
<style scoped>
.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    /* background: var(--el-color-danger-light-9); */
    color: var(--el-color-danger);
}

.yuanquan {
    background: #fff;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    margin-right: 2px;
}

.active {
    background-color: aqua;
}

.button {
    margin-left: 10px;
}
</style>
